<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="保险订单详情" navbarType='0' fontColor="#FFFFFF" :bgColor="themeColor" leftIconColor="#FFFFFF"></wlk-navbar>
        <block v-if="!loading">
            <view class="detail-bc" :style="{background:' linear-gradient(to bottom,'+themeColor+' ,'+ color+')'}">
                <view class="d-status bgw br08 pd30">
                    <view class="wlkflex justify-between status-info">
                        <view class="status-text bold">{{order.status_text}}</view>
                    </view>
                    <u-divider></u-divider>
                    <view class="wlkflex justify-between">
                        <view class="price-info wlkflex">
                            <text class="price-text">总价：</text>
                            <text class="price">¥{{order.total_fee}}</text>
                        </view>
                        <view class="wlkflex price-more" @click="showItem=true">
                            <view class="mr05">价格明细</view>
                            <u-icon name="arrow-right" color="#999" size="15"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">产品信息</view>
                <view class="line-info wlkflex justify-between mt30">
                    <view class="title u-line-2 bold">{{order.project_info?order.project_info.name:''}}</view>
                    <u-icon name="arrow-right" color="#999" size="15" @click="showTipInsurance = true"></u-icon>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">下单时间</view>
                    <view>{{$u.timeFormat(order.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">承保年龄</view>
                    <view>{{order.project_info?order.project_info.age_range:''}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">保障天数</view>
                    <view>{{order.project_info?order.project_info.usetime:''}}</view>
                </view>
                <view class="wlkflex other-info mt30">
                    <view class="other-title mr10">订单编号</view>
                    <view>{{order.order_sn}}</view>
                    <view class="ml20 copy-btn" @click="copyOrderSn(order.order_sn)">
                        复制
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">保障信息</view>
                <view v-for="(item,index) in order.project_info?order.project_info.iteminfo:[]" class="mt30">
                    <u-divider v-if="index>0"></u-divider>
                    <view class="other-desc bold">{{item.name}}</view>
                    <block v-for="(v,k) in item.infos">
                        <view class="wlkflex other-info mt30">
                            <view class="other-title mr10">险种{{k+1}}</view>
                            <view class="other-value">{{v.name}}</view>
                        </view>
                        <view class="wlkflex other-info mt30">
                            <view class="other-title mr10">保障额度</view>
                            <view class="other-value">{{v.price}}元</view>
                        </view>
                    </block>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info">
                <view class="head-title bold">投保人信息</view>
                <view v-for="(item,index) in order.passengers" class="mt30">
                    <u-divider v-if="index>0"></u-divider>
                    <view class="other-desc bold">投保人{{index+1}}</view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title mr10">姓名</view>
                        <view>{{item.realname}}</view>
                    </view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title mr10">手机号</view>
                        <view>{{item.mobile}}</view>
                    </view>
                    <view class="wlkflex other-info mt30">
                        <view class="other-title u-line-1 mr10">{{idTypes[item.idtype]}}</view>
                        <view>{{item.idcard}}</view>
                    </view>
                </view>
            </view>
            <view class="bgw pd30 br08 order-info" v-if="!$u.test.isEmpty(order.images)">
                <view class="head-title bold">保单图片</view>
                <view class="mt30">
                    <u-album :urls="order.images"></u-album>
                </view>
            </view>
        </block>
        <u-popup safeAreaInsetBottom  :show="showItem" closeable @close="showItem=false" round="20">
            <view class="order-item">
                <view class="pd30">
                    <view class="center title">价格明细</view>
                    <view class="item-info">
                        <view class="info-flex wlkflex justify-between mt40">
                            <view class="info-head">总价</view>
                            <view class="info-price">￥{{order.price}}</view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.adult_num>0">
                            <view class="info-desc col9">成人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.project_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.adult_num}}人
                                </text>
                                <text class="ml05" v-if="!$u.test.isEmpty(order.lineday)">
                                    x{{order.lineday}}天
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.elder_num>0">
                            <view class="info-desc col9">老人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.project_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.elder_num}}人
                                </text>
                                <text class="ml05" v-if="!$u.test.isEmpty(order.lineday)">
                                    x{{order.lineday}}天
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="order.child_num>0">
                            <view class="info-desc col9">儿童</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{order.project_price}}
                                </text>
                                <text class="ml05">
                                    x{{order.child_num}}人
                                </text>
                                <text class="ml05" v-if="!$u.test.isEmpty(order.lineday)">
                                    x{{order.lineday}}天
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-action-sheet
                :show="showTipInsurance"
                @close="showTipInsurance = false"
                :title="order.project_info?order.project_info.name:''"
                :round="10"
                closeOnClickOverlay
                safeAreaInsetBottom
        >
            <scroll-view class="tip-content" scroll-y>
                <view class="pt20 pb20 nav-info" v-if="!$u.test.isEmpty(order.project_info?order.project_info.iteminfo:[])">
                    <view class="center bold">保险项目及保险额度</view>
                    <view v-for="(item,index) in order.project_info.iteminfo">
                        <view  class="mt20 item-title">{{item.name}}</view>
                        <view v-for="(v,k) in item.infos" class="wlkflex justify-between mt10 col9">
                            <view>{{v.name}}</view>
                            <view>{{v.price}}元</view>
                        </view>
                    </view>
                </view>
                <view class="pt20 pb20" v-if="!$u.test.isEmpty(order.project_info?order.project_info.content:'')">
                    <view class="center bold">详情</view>
                    <view class="mt20">
                        <u-parse :content="order.project_info.content"></u-parse>
                    </view>
                </view>
            </scroll-view>
        </u-action-sheet>
    </view>
</template>

<script>
    import {rgbaToRgb,copy,formatRichText} from '@/wlkutils/tools';
    import {mapMutations, mapGetters} from 'vuex';
    var _self;
	export default {
        computed: {
            ...mapGetters(['themeColor'])
        },
		data() {
			return {
                idTypes:['身份证','护照','台胞证','港澳通行证','港澳居民居住证','军官证','回乡证'],
                id:'',
                order:[],
                color: '',
                showItem:false,
                showTipInsurance:false,
                loading:true
			};
		},
		onLoad(options) {
            _self = this;
            let id = this.$Route.query.id;
            _self.id = id
		},
		onShow() {
            this.color = uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.01);
            this.getData();
		},
		methods: {
			async getData() {
                this.loading = true;
                uni.$u.http.post('order/getProjectDetail', {
                    id:_self.id
                }).then(res => {
                    _self.order = res.data.order;
                    if(!uni.$u.test.isEmpty(_self.order.project_info)){
                        _self.order.project_info.content = formatRichText(_self.order.project_info.content);
                    }
                    _self.loading = false;
                }).catch(res => {

                })
			},
            copyOrderSn(v){
                copy(v);
            },
		},
	};
</script>

<style lang="scss">
    page{
        padding-bottom: 100rpx;
        .detail-bc {
            padding: 30rpx 30rpx 0  30rpx;
            .d-status{
                .status-info{
                    .status-text{
                        font-size: $font-max;
                    }
                    .time-info{
                        font-size: $font-base;
                        .title{
                            color:$uni-text-color-grey;
                        }
                        .time {
                            @include flex;
                            align-items: center;

                            &__item {
                                color:$-tour-price-color;
                                font-size: $font-base;
                                text-align: center;
                            }
                        }
                    }
                }
                .desc{
                    font-size: $font-base;
                    color:$uni-text-color-grey;
                }
                .price-info{
                    .price-text{
                        font-size: $font-base;
                    }
                    .price{
                        color:$-tour-price-color;
                        font-size: $font-max;
                    }
                }
                .price-more{
                    font-size: $font-base;
                    color: #919ccc;
                }

            }
        }
        .order-item{
            padding-bottom: 150rpx;
            min-height: 800rpx;
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-lt;
                .info-flex{
                    .info-head{
                        font-size: $font-base;
                        font-weight: bold;
                    }
                    .info-desc{
                        font-size: $font-sm;
                    }
                    .info-price{
                        font-size: $font-base;
                        color: $-tour-price-color;
                    }
                    .info-desc-price{
                        font-size: $font-sm;
                    }
                }
            }
        }
        .order-info{
            margin: 30rpx;
            .head-title{
                font-size: $font-lg;
                .desc{
                    font-size: $font-base;
                    font-weight: normal;
                }
            }
            .line-info{
                .title{
                    width: 90%;
                    font-size: $font-lt;
                }
            }
            .other-info{
                font-size: $font-base;
                .other-title{
                    color:$uni-text-color-grey;
                    width: 22%;
                }
                .other-wd-title{
                    color:$uni-text-color-grey;
                    width: 23%;
                }
                .other-value{
                    width: 75%;
                }
                .copy-btn{
                    padding: 5rpx 20rpx;
                    border-radius: 30rpx;
                    border:$-solid-border ;
                    font-size: $font-sm;
                    color:$uni-text-color-grey;
                }
            }
            .other-desc{
                font-size: $font-base;
            }
        }
        .tip-content{
            text-align: left;
            padding: 30rpx;
            height: 900rpx;
            font-size: $font-base;
            .head-info{
                border-bottom: 1px solid #eaebec;
            }
            .nav-info{
                border-bottom: 1px solid #eaebec;
            }
            .item-title{
                color: #666666;
                font-weight: bold
            }
        }
    }
</style>
